<header class="main-header">
    <!-- header-logo -->
    <a class="logo" *ngIf="layoutMode=='sidebar'">
        <span class="logo-mini">
            <img src="../../assets/img/logo.png" alt="">
        </span> 
        <span class="logo-lg pull-center">
            <img src="../../assets/img/logo.png" id="ico" height="25" width="25">
            <b>毕</b>业<b>设</b>计管理<b>系统</b>
        </span>
    </a>
    <nav class="navbar navbar-static-top">
        <!-- Sidebar-toggle-button -->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" *ngIf="layoutMode=='sidebar'"></a>
        <!-- drop-down-menu -->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li><input type="text" class="form-control search" placeholder="Search"></li>
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="assets/img/Luffy.jpg" class="user-image" alt="User Image">
                        <span class="hidden-xs">{{user.UserName}}</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="user-header">
                            <img src="assets/img/Luffy.jpg" class="img-circle" alt="User Image">
                            <p class="p-margin">{{user.UserId}} - {{user.UserName}}</p>
                            <p class="p-margin">最近登录 - {{user.updatedAt}}</p>
                        </li>
                        <li class="user-footer">
                            <div class="pull-left">
                                <button (click)="toggleModel('PasswordModel')" class="btn btn-default">修改密码</button>
                            </div>
                            <div class="pull-right">
                                <button (click)="removeSession()" class="btn btn-default">注销</button>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>

<!-- 密码修改Model -->
<div class="modal fade" id="PasswordModel" tabindex="-1" role="dialog" aria-labelledby="修改密码">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" (click)="resetPassWordModel()">&times;</span>
                </button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" #passwordForm="ngForm">
                    <div class="form-group">
                        <label class="control-label col-sm-2">原密码</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" [(ngModel)]="originPassWord" name="originPassWord" placeholder="原密码" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">新密码</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" [(ngModel)]="newPassWord1" name="newPassWord1" placeholder="新密码" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">确认新密码</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" [(ngModel)]="newPassWord2" name="newPassWord2" placeholder="确认新密码" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" (click)="resetPassWordModel()" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" (click)="changePassWord()" [disabled]="!passwordForm.form.valid">确定</button>
            </div>
        </div>
    </div>
</div>